<template>
  <div class="dashboard-editor-container">
    <el-form :model="searchFormList" label-width="80px" @keyup.enter.native="search()">
      <el-row>
        <el-col class="professions">
          <el-form-item label="到账类型" size="small">
            <el-select v-model="searchFormList.payType" placeholder="请选择">
              <el-option
                v-for="item in global.arrivalList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="other" v-if="roleType===0">
          <el-form-item prop="teamName" label="所属团队" size="small" class="item-inline">
            <el-autocomplete
              v-model="searchFormList.teamName"
              :fetch-suggestions="querySearchTeam"
              @select="handleSelectSearchTeam"
              placeholder="请输入内容"
            >
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col class="searchBtn">
          <el-form-item size="small">
            <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="dashboard-btn">
      <el-button :type="btnType===1?'warning':'info'" @click="btnClick(1,'date')">当日</el-button>
      <el-button :type="btnType===2?'warning':'info'" @click="btnClick(2,'month')">月份</el-button>
      <el-button :type="btnType===3?'warning':'info'" @click="btnClick(3,'year')">年份</el-button>
      <el-date-picker
        v-model="searchFormList.times"
        :type="dateType"
        value-format="timestamp"
        placeholder="选择日期"
        @change="dateChange"
      >
      </el-date-picker>
    </el-row>
    <my-table
      :data="tableData"
      :col-configs="colConfigs"
      v-loading="listLoading"
      :page-num="pageNum"
      :page-size="pageSize"
    >
      <el-table-column
        slot="opt"
        fixed="right"
        label="操作"
        width="250">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="accountClick(scope.row)"
            type="text"
            size="small">
            到账详情
          </el-button>
          <el-button
            @click.native.prevent="invoiceClick(scope.row)"
            type="text"
            size="small">
            开票详情
          </el-button>
        </template>
      </el-table-column>
    </my-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :title="dialogTitle" :visible.sync="outerVisible" width="1100px" @close="closeDialog">
      <component :is="currentView" :dialog-list="dialogList" :search-form="searchForm"></component>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getList,
    selectTeam
  } from '@/api/arrival'
  import myTable from '@/components/myTable'
  import global from '@/components/global'
  import projectcontrac from './components/projectcontrac'
  import projectdeposit from './components/projectdeposit'
  import tendercompensation from './components/tendercompensation'
  import tenderdeposit from './components/tenderdeposit'
  import invoice from './components/invoice'

  const payType = function(row, column) {
    if (row.payType) {
      let obj = {}
      obj = global.arrivalList.find((item) => {
        return item.value === row.payType // 筛选出匹配数据
      })
      return obj.label
    }
  }
  export default {
    name: 'arrival',
    components: {
      myTable,
      projectcontrac,
      projectdeposit,
      tendercompensation,
      tenderdeposit,
      invoice
    },
    computed: {
      global() {
        return global
      },
      roleType() {
        return this.$store.state.user.roleType
      },
      teamId() {
        return this.$store.state.user.teamId
      }
    },
    mounted() {
      this.$set(this.searchFormList, 'times', new Date().getTime())
      this.fetchData()
    },
    data() {
      return {
        colConfigs: [
          { prop: 'teamName', label: '团队名称', width: '150' },
          { prop: 'arrivalAmount', label: '到账金额(万元)', width: '150' },
          { prop: 'invoiceAmount', label: '开票金额(万元)', width: '150' },
          { prop: 'payType', label: '到账类型', width: '150', formatter: payType },
          { slot: 'opt' }
        ],
        searchForm: {},
        searchFormList: {
          payType: 6
        },
        tableData: [],
        listLoading: true,
        btnType: 1,
        dateType: 'date',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        outerVisible: false,
        dialogTitle: '到账详情',
        currentView: 'projectcontrac',
        dialogList: {}
      }
    },
    methods: {
      fetchData() {
        this.searchFormList.pageNum = this.pageNum
        this.searchFormList.pageSize = this.pageSize
        this.searchFormList.type = this.btnType
        this.searchFormList.roleType = this.roleType
        this.searchFormList.teamId = this.teamId
        this.listLoading = true
        getList(this.searchFormList).then(response => {
          this.tableData = response.responseBody.list
          this.total = response.responseBody.total
          this.listLoading = false
        })
      },
      search() {
        this.pageNum = 1
        this.fetchData()
      },
      btnClick(type, dateType) {
        this.btnType = type
        this.dateType = dateType
        this.fetchData()
      },
      dateChange() {
        this.fetchData()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.fetchData()
      },
      accountClick(row) {
        this.outerVisible = true
        this.dialogTitle = '到账详情'
        if (this.searchFormList.payType === 6) {
          this.currentView = 'projectcontrac'
        } else if (this.searchFormList.payType === 7) {
          this.currentView = 'tenderdeposit'
        } else if (this.searchFormList.payType === 8) {
          this.currentView = 'projectdeposit'
        } else {
          this.currentView = 'tendercompensation'
        }
        this.dialogList = {
          payType: this.searchFormList.payType,
          times: this.searchFormList.times,
          type: this.searchFormList.type,
          teamId: row.teamId
        }
      },
      invoiceClick(row) {
        this.outerVisible = true
        this.dialogTitle = '开票详情'
        this.currentView = 'invoice'
        this.dialogList = {
          invoiceType: this.searchFormList.payType,
          times: this.searchFormList.times,
          type: this.searchFormList.type,
          teamId: row.teamId,
          teamName: row.teamName
        }
      },
      closeDialog() {
        this.searchForm = {}
      },
      querySearchTeam(queryString, callback) {
        // queryString 为在框中输入的值
        // callback 回调函数,将处理好的数据推回
        delete this.searchFormList.teamId
        if (queryString) {
          const params = {
            teamName: queryString
          }
          selectTeam(params).then(response => {
            for (const i of response.responseBody) {
              i.value = i.teamName
            }
            let nameList = response.responseBody
            if (nameList.length === 0) {
              nameList = [{ value: '暂无数据' }]
            }
            callback(nameList)
          })
        } else {
          callback([])
        }
      },
      handleSelectSearchTeam(item) {
        this.$set(this.searchFormList, 'teamId', item.teamId)
        this.$set(this.searchFormList, 'teamName', item.teamName)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    height: calc(100vh - 130px);
    padding: 32px;
    overflow: auto;
    .dashboard-btn {
      margin-bottom: 20px;
    }
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
      -moz-box-shadow: 2px 2px 5px #333333;
      -webkit-box-shadow: 2px 2px 5px #333333;
      box-shadow: 2px 2px 5px #333333;
      .chart-wrapper-title {
        margin-bottom: 20px;
      }
    }
  }
</style>
